<template>
  <div>
    <!--背景-->
    <!--头部 start-->
    <!--body-->
    <div>
      <div class="weui-cells__title" style="margin-top: 0;">
        <span style="margin-left: 15px;">提示：拖动地图，选择位置。</span>
      </div>
      <div id="maptd"></div>
      <!--定位-->
      <div class="locate" @click="locate">
        <img src="@/assets/locate.png" />
      </div>
      <!--地图定位-->
      <div class="button-sp-area">
        <a href="javascript:void(0);" @click="determine" class="weui-btn weui-btn_primary">确定</a>
      </div>
      <!--弹出层-->
      <van-dialog @confirm="confirm" v-model="show" title="确定位置" show-cancel-button>
        <van-field type="textarea" rows="1" autosize v-model="address" placeholder="请输入地址" />
      </van-dialog>
    </div>
  </div>
</template>

<script>
var self;
var markerpoint,
  mappoint,
  geocodepoint
function MapClick() {
  self && self.MapClick();
}
export default {
  data() {
    var x = 116.40769;
    var y = 39.89945;
    if (this.slow.location.latitude) {
      x = this.slow.location.longitude;
      y = this.slow.location.latitude;
    }
    return {
      originLocate: {
        x: x,
        y: y
      },
      newLocate: {
        x: x,
        y: y
      },
      iosflag: true,
      show: false,
      address: ""
    };
  },
  // apicloud-api:window变化
  onWindowChange() {},
  // 页面初始化完成
  created() {
    self = this;
    this.$toast.loading({
      mask: true,
      message: "地图加载中..."
    });
    this.$nextTick(() => {
      this.loadMap();
    });
  },
  methods: {
    // 初始化地图
    loadMap() {
      mappoint = new T.Map("maptd");
      mappoint.centerAndZoom(
        new T.LngLat(self.originLocate.x, self.originLocate.y),
        18
      );
      geocodepoint = new T.Geocoder();
      geocodepoint.getLocation(
        new T.LngLat(self.originLocate.x, self.originLocate.y),
        ret => {
          self.address = ret.getAddress();
          mappoint.addEventListener("moveend", self.MapMoveend);
          self.addLoayer(self.originLocate.x, self.originLocate.y);
          self.$toast.clear();
        }
      );
    },
    MapMoveend(e) {
      this.newLocate = {
        x: e.target.getCenter().getLng(),
        y: e.target.getCenter().getLat()
      };
      if (this.iosflag) {
        this.iosflag = false;
        this.show = true;
        setTimeout(() => {
          this.show = false;
        }, 0);
      }
      this.addLoayer(
        e.target.getCenter().getLng(),
        e.target.getCenter().getLat()
      );
    },
    addLoayer(x, y) {
      mappoint.clearOverLays();
      //创建标注对象
      markerpoint = new T.Marker(new T.LngLat(x, y));
      //向地图上添加标注
      mappoint.addOverLay(markerpoint);
      // 定义该矩形的显示区域
      var circle = new T.Circle(
        new T.LngLat(self.originLocate.x, self.originLocate.y),
        5,
        {
          color: "#fff",
          weight: 5,
          opacity: 0.5,
          fillColor: "blue",
          fillOpacity: 0.5,
          lineStyle: "solid"
        }
      );
      //向地图上添加圆
      mappoint.addOverLay(circle);
    },
    addMapClick() {
      this.removeMapClick();
      try {
        mappoint.addEventListener("click", MapClick);
      } catch (error) {}
    },
    removeMapClick() {
      try {
        mappoint.removeEventListener("click", MapClick);
      } catch (error) {}
    },
    MapClick(e) {
      self.newLocate = {
        x: e.lnglat.getLng(),
        y: e.lnglat.getLat()
      };
      self.addLoayer(e.lnglat.getLng(), e.lnglat.getLat());
    },
    locate() {
      this.newLocate = {
        x: self.originLocate.x,
        y: self.originLocate.y
      };
      this.addLoayer(self.originLocate.x, self.originLocate.y);
      mappoint.centerAndZoom(new T.LngLat(self.originLocate.x, self.originLocate.y));
    },
    determine() {
      this.$toast.loading({
        mask: true,
        message: "查询中..."
      });
      geocodepoint.getLocation(
        new T.LngLat(self.newLocate.x, self.newLocate.y),
        ret => {
          this.$toast.clear();
          self.address = ret.getAddress();
          self.show = true;
        }
      );
    },
    determine2() {
      this.$toast.loading({
        mask: true,
        message: "查询中..."
      });
      geocodepoint.getLocation(
        new T.LngLat(self.newLocate.x, self.newLocate.y),
        ret => {
          this.$toast.clear();
          self.address = ret.getAddress();
          // self.show = true;
        }
      );
    },
    confirm() {
      window.sessionStorage.setItem(
        "location",
        JSON.stringify({
          address: self.address,
          longitude: self.newLocate.x,
          latitude: self.newLocate.y
        })
      );
      this.$router.back();
    }
  }
};
</script>

<style>
#maptd {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  bottom: -24px;
}
.weui-cells__title {
  position: fixed;
  z-index: 999 !important;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  margin-top: 0;
  top: 0px;
  color: #a29c9c;
  line-height: 30px;
  font-size: 10px;
}
.locate {
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 100px;
  z-index: 100;
  left: 15px;
  background: #ffffff;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 1px 1px 3px #888;
}
.locate img {
  width: 100%;
  height: 100%;
}
.button-sp-area {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
}
.weui-btn_primary {
  background: #1989fa;
  display: block;
  width: 180px;
  margin: 0 auto;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
}
</style>

